<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>ScatterplotMatrix</title>
    <style type="text/css"></style>
  </head>
  <body>
    <script type="text/javascript" src="../../deps/d3.js"></script>
    <script type="text/javascript" src="../../deps/raphael.js"></script>
    <script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../deps/seajs/sea.js"></script>
	<script type="text/javascript">
    //http://planetozh.com/blog/2008/04/javascript-basename-and-dirname/
    var dir = window.location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
    seajs.config({
        alias: {
            'datav': dir + '/../../datav.js',
            'scatterplotMatrix': dir + '/../../libs/scatterplotMatrix.js'
        }
    });
    </script>

    <div id="chart"></div>
    <script type="text/javascript">

    seajs.use(["datav", "scatterplotMatrix"], function (DataV, ScatterplotMatrix) {
        var scatterplotMatrix = new ScatterplotMatrix("chart", {"width": 800, "height": 600, "margin": 50, "typeName": "等级", "tagDimen": "交易总额"});
        DataV.csv("DataExample.csv", function(dataSource) {
            scatterplotMatrix.setSource(dataSource);
            scatterplotMatrix.setDimensionsX(["年龄", "交易总额", "交易笔数"]);
            scatterplotMatrix.setDimensionsY(["年龄", "交易总额", "交易笔数"]);
            scatterplotMatrix.setTypeName(["等级1","等级2","等级3","等级4","等级5","等级6","等级7"]);
            scatterplotMatrix.render();
        });
    });

    </script>
  </body>
</html>
